<template>
    <div class="supplier_detail">
        <div class="nav_box">
            <van-nav-bar title="增类" left-text="" left-arrow @click-left="goBack" />
        </div>
        <div class="content">
            <div class="supplier_detail_top">
                <div class="supplierName">{{ detailInfo.supplierName }}</div>
                <div class="nums">
                    <div class="nums_div">
                        <div class="nums_number">{{ detailInfo.productsCount }}</div>
                        <div class="nums_name">货品总数</div>
                    </div>
                    <div class="nums_div">
                        <div class="nums_number">{{ detailInfo.productsShopping }}</div>
                        <div class="nums_name">上架总数</div>
                    </div>
                    <div class="nums_div">
                        <div class="nums_number">{{ detailInfo.productsOpt }}</div>
                        <div class="nums_name">选品数</div>
                    </div>
                </div>
            </div>
            <div class="supplier_detail_content">
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">商家类型</div>
                    <div class="value">{{ detailInfo.supplierType }}</div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">厂家地址</div>
                    <div class="value">{{ detailInfo.addr }}</div>
                </div>
                <div class="supplier_detail_content_div supplier_detail_content_divorder">
                    <div class="label">合作部门</div>
                    <div class="value">{{ handleExtraData(detailInfo.extraData) }}</div>
                </div>
                <div class="supplier_detail_content_div">
                    <div class="label">详细地址</div>
                    <div class="value">{{ detailInfo.address }}</div>
                </div>
            </div>
            <!-- <div class="addClass" @click="addClass" v-throttle:click>增加品类</div> -->
            <van-button round block class="addClass" type="primary" :loading="loading"  loading-text="执行中..."  @click.prevent="addClass">
                增加品类
            </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { hmSupplierList, addType } from '@/api/supplierList/index'
import { showSuccessToast,showFailToast } from 'vant';

const route = useRoute()
const router = useRouter()
const detailInfo = ref<any>({})
const loading = ref(false)
/** 商品id */
const uniquekey = computed(() => {
    return route.params.id
})
/** 搜索供应商名称 */
const supplierName = computed(() => {
    return route.query.supplierName
})
/** 回退 */
const goBack = () => {
    router.push({
        path: `/addSupplierClass`,
        query: {
            supplierName: supplierName.value
        }
    });
}
/** 获取详情 */
const getDetail = async () => {
    const res = await hmSupplierList({ id: uniquekey.value as any })
    detailInfo.value = res.rows[0]
}
/** 增加类 */
const addClass = async () => {
    loading.value = true
    try{
        await addType({ supplierId: uniquekey.value })
        loading.value = false
        showSuccessToast({ type: 'success', message: '增类成功' });
        router.push('/home')
    }catch(error){
        if(error=='timeout'){
            showFailToast('增类失败');
        }
        loading.value = false
    }
}
/** 品类回显 */
const handleExtraData = (data) => {
    if (data) {
        const list: any[] = []
        data.forEach((element: any) => {
            if (list.indexOf(element.recruiterDeptName) == -1) {
                list.push(element.recruiterDeptName)
            }
        });
        return list.join(',')
    }
}
getDetail()
</script>
<style lang="less" scoped>
.supplier_detail {
    width: 100%;
    height: 100vh;
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    padding-top: 90px;
    .nav_box {
        height: 90px;
        width: 100vw;
        box-sizing: border-box;
        padding-top: 44px;
        background: linear-gradient(0deg, #FFFFFF 0%, #CDECFF 100%);
        position: fixed;
        z-index: 3000;
        top: 0;
    }
    .content {
        width: 100%;
        height: calc(100% - 46px);
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        align-content: flex-start;
        padding: 15px;
    }

    .supplier_detail_top {
        width: 100%;
        box-sizing: border-box;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .supplierName {
            width: 100%;
            height: 40px;
            background: url('@/assets/newui/supplier/icon_gongyingshangxiangqing@2x.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding-left: 15px;
            font-weight: 600;
            font-size: 16px;
            color: #0094FF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
        }

        .nums {
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            font-size: 14px;
            justify-content: space-between;
            background: linear-gradient(180deg, #FFFFFF 0%, #EBF4FF 100%);

            .nums_div {
                text-align: center;
                width: 0;
                flex: 1;

                .nums_name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    line-height: 14px;
                    margin-top: 10px;
                }

                .nums_number {
                    font-weight: 500;
                    font-size: 18px;
                    color: #1A1B1C;
                    line-height: 18px;
                }
            }

            .nums_line {
                width: 1px;
                height: 14px;
                background-color: #E5EDFC;
            }

            .line {
                height: 100%;
                border: 1px solid #BBBBBB;
            }
        }
    }

    .supplier_detail_content {
        width: 100%;
        margin-top: 10px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 13px;
        padding: 0 15px;

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #F3F3FF;
        }

        .supplier_detail_content_div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0px;

            :deep(.van-icon){
                margin-left: 0% !important;
            }

            .label {
                min-width: 55px;
                font-weight: 400;
                font-size: 14px;
                color: #464E5D;
                line-height: 14px;
                text-align: left;
                font-style: normal;
            }
            .van-image {
                width: 90px;
                height: 90px;
            }
            .value {
                max-width: calc(100% - 85px);
                display: flex;
                justify-content: right;
                word-break: break-all;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                line-height: 14px;
                font-style: normal;
                text-transform: lowercase;
            }
        }
    }

    .title {
        width: 100%;
        padding: 10px 20px;
    }

    .titles {
        width: 100%;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .supplier_detail_contract {
        width: 98%;
        // height: 10vh;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 3px;
        font-size: 13px;

        .supplier_detail_content_div {
            height: 35px;
            // height: 50%;
            width: 90%;
            margin-left: 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .addClass {
        position: fixed;
        bottom: 50px;
        width: 40%;
        background-color: #1466FF;
        height: 30px;
        text-align: center;
        color: #fff;
        line-height: 30px;
        font-size: 12px;
        border-radius: 5px;
    }

    :deep .van-nav-bar {
        background-color: #1466ff00;
        height: 46px !important;
        width: 100%;
        position: fixed;
    }

    :deep .van-nav-bar__content {
        background-color: #1466ff00;
    }

    :deep .van-nav-bar__title {
        color: #000;
    }

    :deep .van-nav-bar__title {
        color: #000;
    }

    :deep .van-nav-bar__text {
        color: #0094ff;
    }

    :deep .van-icon {
        margin-left: 5px;
    }
}
</style>